<template>
  <div class="header-content">
    <!-- 左侧菜单收起按钮 -->
    <div class="menu-toggle" @click="$emit('toggle-collapse')">
      <el-icon :style="{ fontSize: '26px' }">
        <template v-if="isCollapse">
          <Expand />
        </template>
        <template v-else>
          <Fold />
        </template>
      </el-icon>
    </div>

    <!-- 动态面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="item.to">
          {{ item.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 用户信息 -->
    <div class="user-info">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-icon class="user-icon"><User /></el-icon>
          <span class="username">{{ username }}</span>
          <el-icon class="arrow-icon"><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><Key /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>
              <span>退出系统</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

defineProps({
  isCollapse: Boolean, // 父组件传递的折叠状态
})

defineEmits(['toggle-collapse'])

const route = useRoute()
const router = useRouter()

// 动态生成面包屑
const breadcrumbs = computed(() => {
  return route.matched.map((item) => ({
    label: item.meta.title || item.name,
    to: item.path !== route.path ? { path: item.path } : null,
  }))
})

// 定义一个变量存储用户名
const username = ref('')

// 从 localStorage 获取用户信息
const fetchUsername = () => {
  const userInfoString = localStorage.getItem('user') // 从 localStorage 获取用户信息
  if (!userInfoString || userInfoString === 'undefined') {
    console.warn('用户信息不存在或无效，请检查登录逻辑')
    username.value = '未知用户'
    return
  }

  try {
    const userInfo = JSON.parse(userInfoString) // 解析 JSON 数据
    username.value = userInfo?.truename || userInfo?.username || '未知用户'
  } catch (error) {
    console.error('解析用户信息失败:', error)
    username.value = '未知用户'
  }
}

// 页面加载时获取用户名
onMounted(() => {
  fetchUsername()
  console.log('用户名:', username.value)
})

// 退出登录逻辑
const handleLogout = () => {
  localStorage.removeItem('user') // 清除用户信息
  localStorage.removeItem('token') // 清除 token
  ElMessage.success('退出登录成功')
  router.push('/login')
}
</script>

<style scoped lang="less">
.header-content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0; /* 移除多余的内边距 */
  background-color: #5B6D85;
  color: white;

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0; /* 确保没有外边距 */
    padding: 0; /* 确保没有内边距 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative; /* 确保图标紧贴左侧 */
    left: -22px; /* 向左移动，去掉间距 */

    .el-icon {
      color: white;
    }
  }

  .breadcrumb-container {
    flex: 1; /* 占据剩余空间 */
    white-space: nowrap; /* 防止换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px; /* 给面包屑导航留出与图标的间距 */

    .el-breadcrumb {
      font-size: 14px; /* 设置字体大小 */
      color: #f0f0f0; /* 设置默认字体颜色为灰白色 */
      font-weight: 400; /* 设置字体粗细 */

      .el-breadcrumb-item {
        color: #ffffff; /* 设置面包屑文字颜色为灰白色 */
        transition: color 0.3s; /* 添加颜色过渡效果 */

        &:hover {
          color: #ffffff; /* 鼠标悬停时的颜色为纯白色 */
          text-decoration: underline; /* 鼠标悬停时添加下划线 */
        }
      }

      .el-breadcrumb__separator {
        margin: 0 6px; /* 调整分隔符左右的间距 */
        color: #000000; /* 设置分隔符颜色为浅灰白色 */
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    color: white;

    .el-dropdown-link {
      display: flex;
      align-items: center;
      color: white;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      transition: all 0.3s;
      border: none; /* 移除边框 */
      outline: none; /* 移除聚焦时的黑色边框 */

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .user-icon {
        margin-right: 8px;
        font-size: 20px;
      }

      .username {
        margin-right: 8px;
      }

      .arrow-icon {
        font-size: 16px;
      }
    }
  }
}
</style>
